Test your skills: Overflow

The aim of this skill test is to help you assess whether you understand overflow in CSS and how to manage it.

Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.

](https://developer.mozilla.org/pong/click?code=aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2NsaWNrL3gvR1RORDQyN1VDWUJJS0szTkY2U0xZS1FVQ0FTSTQySk1DNllJUFozSkNBU0k1SzdFQzZBRDYyN0tDNjdJUDJRWUZUU0lQS1FZQ0VZSVAySjdDV1NEUEtRRUhFWUk1MjdOQ1lZSVQ1M0VDVE5DWUJaNTJL.aiN2mHQNNhpVbpA2Frtm7QO4z0DFrvm05ypcfGbAN%2FU%3D&version=2)Ad

Overflow 1

In this task, the content is overflowing the box because it has a fixed height.

To complete the task:

Update the CSS so that the box height is maintained and scrollbars appear only when there is enough text to cause an overflow.
Test your solution by removing some text from the HTML and checking that no scrollbar appears when there is only a small amount of text.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="box">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
  border: 5px solid black;
  padding: 1em;
  height: 200px;
  width: 300px;
}

The updated styling should look like this:

Play

Click here to show the solution

You should add overflow: auto so that the box will only gain scrollbars when the content is too large:

Overflow 2

In this task, there is an image in the box that is bigger than the dimensions of the box so that it overflows visibly. Update the CSS so that any image outside of the box is hidden.

The starting point of the task looks like this:

Play

Here's the underlying code for this starting point:

htmlCopyPlay

<div class="box">
  <img
    alt="flowers"
    src="https://mdn.github.io/shared-assets/images/examples/flowers.jpg" />
</div>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 5px solid black;
  height: 200px;
  width: 300px;
}

The updated styling should look like this:

Play

Click here to show the solution

You should add overflow: hidden to the .box selector:

Help improve MDN

Was this page helpful to you?

YesNo

Learn how to contribute

This page was last modified on Feb 3, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

Filter sidebar

Your blueprint for a better internet.

MDN

Contribute

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.

Test your skills: Overflow

In this article

Overflow 1

Overflow 2

Help improve MDN